<template>
  <div class="search">
    <div class="search-input">
      <img class="icon" :src="require('../static/search.png')" />
      <input
        class="input"
        type="text"
        v-model="value"
        :placeholder="placeholder"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      value: '',
    }
  },
  onLoad() {},
  watch: {
    value(v) {
      this.$emit('search', v)
    },
  },
  methods: {
    getClick() {},
  },
}
</script>

<style lang="scss" scoped>
.search {
  .search-input {
    height: 70rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    margin: 20rpx;
    background: #f8f8f8;
    border-radius: 50rpx;
    .icon {
      width: 48rpx;
      height: 48rpx;
    }
    .input {
      flex: 1;
      font-size: 28rpx;
      margin-left: 10rpx;
      &::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
